<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/emptyshopcar.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
</head>
<body>
    <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>
    <!-- 头部 -->
    <div class="em-top">
        <div class="em-top-wrap">
            <img src="../images/topdark.svg" alt="">
        </div>
    </div>


    <!-- 继续购买部分 -->
    <div class="em-back">
        <div class="em-back-wrap">
            <div class="em-back-inner">
                <a href="javascript:;" class="continue">
                    <i><</i>
                    <img src="../images/emarrow.svg" alt="">
                    <span>继续购买</span>
                </a>
            </div>
        </div>
    </div>


    <!-- 版心 -->
    <div class="em-all">
        <div class="em-all-wrap">

             <!-- 分类部分 -->
                <div class="em-classify">
                     <div class="em-cy-title">
                         <span>分类</span>
                     </div>
                     <ul>
                        <li>
                            <a href="javascript:;">护肤</a>
                        </li>
                        <li>
                            <a href="javascript:;">彩妆</a>
                        </li>
                        <li>
                           <a href="javascript:;">香氛</a>
                        </li>
                        <li>
                            <a href="javascript:;">护发</a>
                        </li>
                        <li>
                           <a href="javascript:;">官网臻享</a>
                        </li>
                        <li>
                           <a href="javascript:;">奢护服务预约</a> 
                        </li>
                    </ul>
                </div>




                <!-- 右侧购物车界面 -->

                 <div class="em-shopcar">
                     <h2>购物车为空</h2>
                     <div class="em-shopcar-lunbo">
                         <h3>为您推荐</h3>
                         <div class="em-prev">
                             <!-- <var class="em-back1"></var> -->
                            <i class="iconfont icon-xiangzuo"></i>
                            <!-- <img src="../images/prev.svg" alt=""> -->
                        </div>
                         <div class="em-shopcar-lb">
                             <ul class="em-lunbo-inner">
                                 <!-- <li>
                                    <a href="javascript:;" >
                                     <div class="contain">
                                         <img src="../images/bigpicthree.png" alt="">
                                     </div>
                                         <h3>希思黎轻柔持妆粉底液</h3>
                                     </a>
                                     <p>长效持妆，整日匀亮如初</p>
                                     <span>￥680.00</span>
                                 </li> -->
                             </ul>
            

                        
                     </div>
                     <div class="em-next">
                        <!-- <var class="em-back2"></var> -->
                        <i class="iconfont icon-xiangyou
                        "></i>
                       <!-- <img src="../images/next.svg" alt=""> -->
                   </div>
                 </div>

        </div>
    </div>


   <script src="../js/ajax.js"></script>
    <script src="../js/emptyshopcar.js"></script>
    <script>
       let oRow = document.querySelector('.em-lunbo-inner')
       console.log(oRow)
        // 存总条数
        let total = 0
        // ajax是异步
        if (localStorage.getItem('pagenum') === null) {
            pageAjax(1)
        } else {
            console.log(localStorage.getItem('pagenum'))
            pageAjax(localStorage.getItem('pagenum') - 0)
        }
        function pageAjax(n) {
            pAjax({
                url: '../server/list.php',
                data: {
                    pagenum: 1,
                    pagesize: 10
                }
            }).then(function (res) {
                // 解析数据
                let json = JSON.parse(res)

                console.log(json)

                // 存总条数，给分页使用
                total = json.total

                // 先清空后渲染
                oRow.innerHTML = ''

                // 循环渲染页面
                json.data.forEach(function (ele) {
                    let str = `<li>
                   <a href="javascript:;" >
                    <div class="contain">
                        <img src="${ele.goods_bigPic1}" alt="" class="showimg">
                        <img src="${ele.goods_bigPic2}" alt="" class="hideimg">
                    </div>
                        <h3>${ele.goods_name}</h3>
                    </a>
                    <p>${ele.goods_name}</p>
                    <span>￥${ele.goods_price}</span>
                </li>`
                    oRow.innerHTML += str
                })
               

                // 下方轮播图鼠标移入换图片
                $('.hideimg').hide()
                // console.log($('.hideimg').length)
               
                $('.em-lunbo-inner li a').mouseenter(function(){
                   $(this).children().children().eq(1).show()
                   $(this).children().children().eq(0).hide()
                })
                $('.em-lunbo-inner li a').mouseleave(function(){
                    $(this).children().children().eq(0).show()
                   $(this).children().children().eq(1).hide()
                })


            // $('.em-next').click(function(){
            //     alert('111')
            // })


            //   点击按钮实现轮播
            var counter=0
            function lunboPlay(){
                counter++
                console.log(counter)
                if(counter === 8){
                    counter=0
                }
                $('.em-lunbo-inner').css({left:-counter*274})
            }
            $('.em-next').click(lunboPlay)
            $('.em-prev').click(function(){
                counter--
                if(counter === -1){
                    counter = 7
                }
                $('.em-lunbo-inner').css({left:-counter*274})
            })
                
            })
        }
    </script>
    <script>
        
        
    </script>
    <script src="../js/emptyshopcar.js"></script>
</body>
</html>
